<template>
  <div class="recommended-courses-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>推荐课程</span>
          <el-button-group>
            <el-button :type="activeView === 'card' ? 'primary' : ''" @click="activeView = 'card'">
              <el-icon><Grid /></el-icon>
            </el-button>
            <el-button :type="activeView === 'list' ? 'primary' : ''" @click="activeView = 'list'">
              <el-icon><List /></el-icon>
            </el-button>
          </el-button-group>
        </div>
      </template>
      
      <div class="filter-container">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-select
              v-model="filterCategory"
              placeholder="课程类别"
              clearable
              style="width: 100%"
              @change="handleFilterChange"
            >
              <el-option
                v-for="item in categoryOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-select
              v-model="filterType"
              placeholder="推荐类型"
              clearable
              style="width: 100%"
              @change="handleFilterChange"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
          <el-col :span="8">
            <el-input
              v-model="searchKeyword"
              placeholder="搜索课程名称或教师"
              clearable
              @input="handleFilterChange"
            >
              <template #prefix>
                <el-icon><Search /></el-icon>
              </template>
            </el-input>
          </el-col>
        </el-row>
      </div>
      
      <!-- 卡片视图 -->
      <div v-if="activeView === 'card'" class="card-view">
        <el-row :gutter="20">
          <el-col 
            :xs="24" 
            :sm="12" 
            :md="8" 
            :lg="6" 
            v-for="course in filteredCourses" 
            :key="course.id"
            class="card-col"
          >
            <el-card 
              class="course-card" 
              :body-style="{ padding: '0px' }"
              shadow="hover"
              @click="viewCourseDetail(course)"
            >
              <div class="course-card-header" :class="getCourseTypeClass(course.type)">
                <div class="course-type-tag">{{ getTypeLabel(course.type) }}</div>
                <div class="course-match">
                  <el-tooltip :content="`匹配度: ${course.matchScore}%`" placement="top">
                    <div class="match-circle">{{ course.matchScore }}%</div>
                  </el-tooltip>
                </div>
              </div>
              <div class="course-card-content">
                <h3 class="course-title">{{ course.name }}</h3>
                <div class="course-info">
                  <div class="info-item">
                    <el-icon><User /></el-icon>
                    <span>{{ course.teacher }}</span>
                  </div>
                  <div class="info-item">
                    <el-icon><Tickets /></el-icon>
                    <span>{{ course.credit }}学分</span>
                  </div>
                  <div class="info-item">
                    <el-icon><Calendar /></el-icon>
                    <span>{{ course.semester }}</span>
                  </div>
                </div>
                <div class="course-description">{{ course.description }}</div>
                <div class="course-tags">
                  <el-tag 
                    v-for="tag in course.tags" 
                    :key="tag"
                    size="small"
                    effect="plain"
                  >
                    {{ tag }}
                  </el-tag>
                </div>
              </div>
              <div class="course-card-footer">
                <el-button type="primary" text>查看详情</el-button>
                <el-button type="success" text>选择课程</el-button>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
      
      <!-- 列表视图 -->
      <div v-else class="list-view">
        <el-table :data="filteredCourses" style="width: 100%">
          <el-table-column label="课程名称" min-width="200">
            <template #default="scope">
              <div class="course-name-cell">
                <span class="course-name">{{ scope.row.name }}</span>
                <el-tag 
                  size="small" 
                  :type="getTagType(scope.row.type)"
                >
                  {{ getTypeLabel(scope.row.type) }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="code" label="课程代码" width="120" />
          <el-table-column prop="teacher" label="教师" width="100" />
          <el-table-column prop="credit" label="学分" width="80" align="center" />
          <el-table-column prop="semester" label="学期" width="120" />
          <el-table-column label="匹配度" width="100" align="center">
            <template #default="scope">
              <el-progress 
                :percentage="scope.row.matchScore || 0" 
                :stroke-width="10"
                :color="getMatchColor(scope.row.matchScore)"
              />
            </template>
          </el-table-column>
          <el-table-column label="标签" min-width="150">
            <template #default="scope">
              <div class="course-tags-cell">
                <el-tag 
                  v-for="tag in scope.row.tags" 
                  :key="tag"
                  size="small"
                  effect="plain"
                  class="course-tag"
                >
                  {{ tag }}
                </el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150" fixed="right">
            <template #default="scope">
              <el-button link type="primary" @click="viewCourseDetail(scope.row)">查看详情</el-button>
              <el-button link type="success">选课</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    
    <!-- 课程详情对话框 -->
    <el-dialog
      v-model="showDetailDialog"
      :title="currentCourse.name"
      width="700px"
    >
      <div class="course-detail">
        <div class="course-detail-header">
          <div class="course-basic-info">
            <el-tag :type="getTagType(currentCourse.type)" effect="dark" size="large">
              {{ getTypeLabel(currentCourse.type) }}
            </el-tag>
            <div class="course-code">{{ currentCourse.code }}</div>
          </div>
          <div class="match-rate">
            <el-progress
              type="circle"
              :percentage="currentCourse.matchScore || 0"
              :width="80"
              :stroke-width="10"
              :color="getMatchColor(currentCourse.matchScore)"
            >
              <template #default>
                <div class="match-text">
                  <div>匹配度</div>
                  <div>{{ currentCourse.matchScore }}%</div>
                </div>
              </template>
            </el-progress>
          </div>
        </div>
        
        <el-descriptions :column="3" border>
          <el-descriptions-item label="教师">{{ currentCourse.teacher }}</el-descriptions-item>
          <el-descriptions-item label="学分">{{ currentCourse.credit }}</el-descriptions-item>
          <el-descriptions-item label="学期">{{ currentCourse.semester }}</el-descriptions-item>
          <el-descriptions-item label="课程类别">{{ getCategoryLabel(currentCourse.category) }}</el-descriptions-item>
          <el-descriptions-item label="上课时间">{{ currentCourse.time || '待定' }}</el-descriptions-item>
          <el-descriptions-item label="上课地点">{{ currentCourse.location || '待定' }}</el-descriptions-item>
        </el-descriptions>
        
        <div class="detail-section">
          <h3>课程介绍</h3>
          <p>{{ currentCourse.description }}</p>
        </div>
        
        <div class="detail-section">
          <h3>推荐理由</h3>
          <div class="recommendation-reasons">
            <div v-for="(reason, index) in currentCourse.reasons" :key="index" class="reason-item">
              <el-icon><Check /></el-icon>
              <span>{{ reason }}</span>
            </div>
          </div>
        </div>
        
        <div class="detail-section">
          <h3>课程标签</h3>
          <div class="detail-tags">
            <el-tag
              v-for="tag in currentCourse.tags"
              :key="tag"
              effect="plain"
              class="detail-tag"
            >
              {{ tag }}
            </el-tag>
          </div>
        </div>
      </div>
      
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDetailDialog = false">关闭</el-button>
          <el-button type="success" @click="selectCourse">选择课程</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Grid, List, User, Tickets, Calendar, Search, Check } from '@element-plus/icons-vue'
import studentApi from '@/api/modules/student'

// 视图模式
const activeView = ref('card')
// 筛选条件
const filterCategory = ref('')
const filterType = ref('')
const searchKeyword = ref('')

// 详情对话框控制
const showDetailDialog = ref(false)
const currentCourse = ref({})

// 课程类别选项
const categoryOptions = [
  { label: '专业必修课', value: 'required' },
  { label: '专业选修课', value: 'elective' },
  { label: '通识选修课', value: 'general' },
  { label: '跨学科课程', value: 'interdisciplinary' }
]

// 推荐类型选项
const typeOptions = [
  { label: '基于课程计划', value: 'plan' },
  { label: '基于历史成绩', value: 'grade' },
  { label: '基于兴趣标签', value: 'interest' },
  { label: '基于职业规划', value: 'career' }
]

// 模拟推荐课程数据
const recommendedCourses = ref([])

const fetchRecommendedCourses = async () => {
  const { data } = await studentApi.getRecommendedCourses()
  recommendedCourses.value = data
}

onMounted(() => {
  fetchRecommendedCourses()
})

// 根据筛选条件过滤课程
const filteredCourses = computed(() => {
  let result = recommendedCourses.value
  
  if (filterCategory.value) {
    result = result.filter(course => course.category === filterCategory.value)
  }
  
  if (filterType.value) {
    result = result.filter(course => course.type === filterType.value)
  }
  
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    result = result.filter(course => 
      course.name.toLowerCase().includes(keyword) || 
      course.teacher.toLowerCase().includes(keyword)
    )
  }
  
  return result
})

// 获取课程类型标签类
const getCourseTypeClass = (type) => {
  const classMap = {
    'plan': 'type-plan',
    'grade': 'type-grade',
    'interest': 'type-interest',
    'career': 'type-career'
  }
  return classMap[type] || 'type-default'
}

// 获取标签类型
const getTagType = (type) => {
  const typeMap = {
    'plan': 'primary',
    'grade': 'success',
    'interest': 'warning',
    'career': 'danger'
  }
  return typeMap[type] || 'info'
}

// 获取类型文本
const getTypeLabel = (type) => {
  const labelMap = {
    'plan': '课程计划',
    'grade': '成绩推荐',
    'interest': '兴趣推荐',
    'career': '职业规划'
  }
  return labelMap[type] || type
}

// 获取类别文本
const getCategoryLabel = (category) => {
  const categoryMap = {
    'required': '专业必修课',
    'elective': '专业选修课',
    'general': '通识选修课',
    'interdisciplinary': '跨学科课程'
  }
  return categoryMap[category] || category
}

// 获取匹配度颜色
const getMatchColor = (score) => {
  if (score >= 90) return '#67C23A'
  if (score >= 80) return '#409EFF'
  if (score >= 70) return '#E6A23C'
  return '#F56C6C'
}

// 处理筛选条件变化
const handleFilterChange = () => {
  // 可以添加额外的处理逻辑
}

// 查看课程详情
const viewCourseDetail = (course) => {
  currentCourse.value = course
  showDetailDialog.value = true
}

// 选择课程
const selectCourse = () => {
  ElMessage({
    type: 'success',
    message: `课程 ${currentCourse.value.name} 已加入选课列表`
  })
  showDetailDialog.value = false
}
</script>

<style scoped>
.recommended-courses-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.filter-container {
  margin-bottom: 20px;
}

/* 卡片视图样式 */
.card-view {
  margin-top: 20px;
}

.card-col {
  margin-bottom: 20px;
}

.course-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s;
}

.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.course-card-header {
  padding: 10px 15px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.type-plan {
  background-color: #409EFF;
}

.type-grade {
  background-color: #67C23A;
}

.type-interest {
  background-color: #E6A23C;
}

.type-career {
  background-color: #F56C6C;
}

.course-type-tag {
  font-weight: bold;
}

.match-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

.course-card-content {
  padding: 15px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.course-title {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  color: #303133;
}

.course-info {
  margin-bottom: 10px;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  color: #606266;
  font-size: 13px;
}

.info-item .el-icon {
  margin-right: 5px;
  font-size: 14px;
}

.course-description {
  color: #606266;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 10px;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.course-tags {
  margin-top: auto;
}

.course-tags .el-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}

.course-card-footer {
  padding: 10px 15px;
  border-top: 1px solid #ebeef5;
  display: flex;
  justify-content: flex-end;
}

/* 列表视图样式 */
.list-view {
  margin-top: 20px;
}

.course-name-cell {
  display: flex;
  align-items: center;
}

.course-name {
  margin-right: 10px;
}

.course-tags-cell {
  display: flex;
  flex-wrap: wrap;
}

.course-tag {
  margin-right: 5px;
  margin-bottom: 5px;
}

/* 详情对话框样式 */
.course-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.course-basic-info {
  display: flex;
  flex-direction: column;
}

.course-code {
  margin-top: 10px;
  color: #909399;
  font-size: 14px;
}

.match-text {
  font-size: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #606266;
}

.detail-section {
  margin-top: 20px;
}

.detail-section h3 {
  margin-bottom: 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid #ebeef5;
  color: #303133;
}

.recommendation-reasons {
  margin-top: 10px;
}

.reason-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 8px;
}

.reason-item .el-icon {
  color: #67C23A;
  margin-right: 8px;
  font-size: 16px;
}

.detail-tags {
  display: flex;
  flex-wrap: wrap;
}

.detail-tag {
  margin-right: 8px;
  margin-bottom: 8px;
}
</style> 